<script setup lang="ts" name="deptType">
import {defineAsyncComponent, onMounted, reactive, ref, toRefs} from "vue";
import {deleteById, getDeptList, getDeptTree} from "@/api/system/dept";
import { notify } from "@/utils/element";
import { SysDeptQuery, SysDeptType } from "@/types/system";
const MenuEdit = defineAsyncComponent(() => import('@/views/system/dept/components/dept-edit.vue'));
// left 内容开始
interface Tree {
  id: string;
  label: string
  children?: Tree[] // 子节点
}

 var parentId = '';
const handleNodeClick = (data: Tree) => {
 parentId = data.id;
  getDeptList(data.id).then((res) => {
    state.tableList = res.data;
  })
}

function getDeptListData(){
  getDeptList(parentId).then((res) => {
    state.tableList = res.data;
  })
}


onMounted (() => {
  getTreeData();
})


const defaultProps = {
  children: 'children',
  label: 'label',
}

 //点击查询
    function handleQuery() {
        //将页码设置为第一页
        state.page.pageNum = 1;
        getTreeData();
    }

async function getTreeData(){
  const { data } = await getDeptTree();
  
  state.dataTree = data;
  getDeptListData()
}

// right 内容开始
const state = reactive({
  loading: false,
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  } as PageType,
  query: {
    deptName: ''
  } as unknown as SysDeptQuery,
  dataTree: [],
  tableList: [] as SysDeptType [],
});


function handleAdd(){
  editRef.value.open('add', '新增', {parentId});
}
function handleEdit(row: SysDeptQuery){
  //console.log('handleEdit', row)
  editRef.value.open('edit','编辑',row);
}
async function handleDelete(id: string){
  console.log('handleDelete',id);
  try {
    state.loading = true;
    await deleteById(id);
    //提示成功
    notify('删除成功！', {type: 'success'});
    //刷新列表
    getTreeData();
  } catch (error) {
  } finally {
    state.loading = false;
  }

}
const { loading, page, query, tableList } = { ...toRefs(state)};
const tableListRef = ref();
const editRef = ref();
</script>

<template>
  <div class="layout-padding">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always">
          <el-tree
            style="max-width: 600px"
            :data="state.dataTree"
            :props="defaultProps"
            :highlight-current="true"
            :default-expand-all="true"
            @node-click="handleNodeClick"
          />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="always">
          <el-form inline :model="query">
            <el-form-item label="部门名称">
              <el-input v-model="query.deptName" maxlength="30" placeholder="请输入部门名称" clearable />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery()" icon="ele-Search" type="primary">查询</el-button>
              <el-button @click="handleAdd()" icon="ele-Plus" type="success">新增部门</el-button>
            </el-form-item>
          </el-form>

          <el-table
            class="w100"
            ref="tableListRef"
            v-loading="loading"
            :data="tableList"
            row-key="menuId"
            border
            stripe
          >
            <el-table-column prop="menuName" label="部门名称" header-align="center" align="center">
                <template #default="{row}">
                    <span class="ml10">{{ row.deptName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="状态" align="center">
              <template #default="{row}">
                    <el-tag effect="plain" :type="row.status == '0' ? 'primary' :  'warning'">{{ row.status == '0' ? '正常' : '停用' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" header-align="center" align="left" show-overflow-tooltip/>
            <el-table-column prop="orderNum" label="排序" align="center" width="100px"/>
            <el-table-column label="操作" align="center" width="240px">
              <template #default="{row}">
                <el-button @click.stop="handleEdit(row)" icon="ele-Edit" type="warning" link>修改</el-button>
                <el-popconfirm @confirm="handleDelete(row.deptId)" width="auto" :title="`确定永久删除【${row.deptName}】吗?`">
                  <template #reference>
                    <el-button @click.stop icon="ele-Delete" type="danger" link>删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="getTreeData"/>
  </div>
</template>

<style scoped>

</style>
